<template>
  <div>
    <h1>个人信息</h1>
    <form>
      <div class="avatar-upload">
        <div class="avatar-preview-container" @click="triggerFileInput">
          <div class="avatar-preview">
            <img :src="formData.avatar" alt="用户头像">
          </div>
          <div class="avatar-overlay">
            <span>更换头像</span>
          </div>
        </div>
        <input type="file" ref="avatarInput" accept="image/*" style="display: none;" @change="handleAvatarChange">
        <p style="color: #666; font-size: 0.8rem;">点击头像更换，支持JPG、PNG格式.尺寸不超过400*400</p>
      </div>
      <div class="form-group">
        <label>邮箱</label>
        {{ formData.email }}
      </div>
      <div class="form-group">
        <label for="username">账号</label>
        <input v-if="!user.username" type="text" id="username" placeholder="账号设置后不可以修改"
               v-model="formData.username">
        <span v-else>{{ formData.username }}</span>
      </div>
      <div class="form-group">
        <label for="nickname">昵称</label>
        <input type="text" id="nickname" placeholder="请输入昵称" v-model="formData.nickname">
      </div>
      <div class="form-group">
        <label for="mobile">手机号码</label>
        <input type="tel" id="mobile" placeholder="请输入手机号码" v-model="formData.mobile">
      </div>
      <div class="form-group">
        <label for="idCard">身份证号码</label>
        <input type="text" id="idCard" placeholder="请输入身份证号码" v-model="formData.idCard">
      </div>
      <div class="form-group">
        <label for="birth">出生日期</label>
        <el-date-picker
            id="birth"
            v-model="formData.birth"
            type="date"
            placeholder="请选择出生日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style=" min-width: 480px;height: 35px"
        />
      </div>
      <div class="form-group">
        <label for="gender">性别</label>
        <select id="gender" name="gender" v-model="formData.gender">
          <option value="0">请选择</option>
          <option value="1">男</option>
          <option value="2">女</option>
        </select>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-primary" @click="saveInfo">保存修改</button>
        <button type="reset" class="btn btn-secondary">重置</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import {ref, watch} from 'vue'
import {ElMessage} from "element-plus";
import {IMG_BASE_PATH} from "@/config/api-config.js";
import apis from "@/config/api-config.js";
import getResponse from "@assets/js/http-client.js";
import {ElDatePicker} from "element-plus";
import {validateMobile,identityCodeValid} from "@/assets/js/form-data-validate.js";

const props = defineProps({
  user: {
    type: Object,
    default: () => null,
    required: true
  }
})
const emit = defineEmits(['reload-info']);
const avatarInput = ref(null)
const formData = ref({});
const triggerFileInput = () => {
  avatarInput.value.click()
}

/**
 * 上传会员用户头像
 * @param e
 */
const handleAvatarChange = async (e) => {
  //file控件DOM对象
  const fileControl = e.target;
  //上传的图片文件集合
  const files = e.target.files;
  let len = files.length;
  if (0 === len) {
    ElMessage.warning('您没有选择任何图片');
    return
  }
  if (len > 1) {
    ElMessage.warning('您只能选择一张图片');
    return
  }
  let imgFile = files[0];
  //请检查是否为图片文件
  if (!imgFile.type.match(/image\/(jpg|jpeg|png)$/)) {
    ElMessage.warning('请选择JPG、JPEG或PNG格式的图片');
    return
  }
  //请检查图片文件大小是否超过400KB
  if (imgFile.size > 400 * 1024) {
    ElMessage.warning('图片文件大小不能超过400KB');
    return
  }
  let url = apis.member.setAvatar.url;
  let type = apis.member.setAvatar.type;
  let result = await getResponse(url, type, {avatar: imgFile}, false, true);
  if (200 !== result.code) {
    ElMessage.error(result.message);
    return
  }
  ElMessage.success('头像设置成功');
  //更新用户头像
  formData.value.avatar = IMG_BASE_PATH + result.data;
  //刷新用户信息
  emit('reload-info');
}
const saveInfo = async () => {
  let oldVal = {...props.user};
  let newVal = {...formData.value};
//过滤
  let params = {};
  if (!oldVal.username && newVal.username) {
    params.username = newVal.username;
  }
  if (oldVal.nickname !== newVal.nickname && newVal.nickname) {
    params.nickname = newVal.nickname;
  }
  if (oldVal.mobile !== newVal.mobile && newVal.mobile) {
    if (!validateMobile(newVal.mobile)) {
      ElMessage.error('请输入正确的手机号码');
      return
    }
    params.mobile = newVal.mobile;
  }
  if (oldVal.idCard !== newVal.idCard && newVal.idCard) {
    if (!identityCodeValid(newVal.idCard)) {
      ElMessage.error('请输入正确的身份证号码');
      return
    }
    params.idCard = newVal.idCard;
  }
  if (oldVal.birth !== newVal.birth && newVal.birth) {
    params.birth = newVal.birth;
  }
  if (oldVal.gender !== newVal.gender && newVal.gender&&newVal.gender!=='0') {
    params.gender = newVal.gender;
  }
  let url = apis.member.modify.url;
  let type = apis.member.modify.type;
  let result = await getResponse(url, type, params);
  if (200 !== result.code) {
    ElMessage.error(result.message);
    return
  }
  ElMessage.success('信息更新成功');
  //刷新用户信息
  emit('reload-info');
}

watch(() => props.user, (newVal) => {
  formData.value = {...newVal}
});
</script>
<style scoped>
/* 个人信息表单样式 */
h1 {
  text-align: left;
  color: #333;
  margin-bottom: 2rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: inline-block;
  width: 100px;
  margin-bottom: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
  width: 80%;
  min-width: 480px;
  max-width: 600px;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus {
  outline: none;
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.btn-group {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007BFF;
  color: #fff;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

/* 头像上传样式 */
.avatar-upload {
  margin-bottom: 2rem;
  text-align: center;
}

.avatar-preview-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 10px;
}

.avatar-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #eee;
  transition: all 0.3s ease;
}

.avatar-preview-container:hover .avatar-preview {
  border-color: #007BFF;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
}

.avatar-preview-container:hover .avatar-overlay {
  opacity: 1;
}
</style>